import React from 'react';
import styled from 'styled-components';
import Label from 'components/Basic/Label';
import Description from 'components/Basic/Description';
import HighLighter from 'components/Basic/HighLighter';
import Parameter from 'components/Basic/Parameter';
import { ParameterSection } from 'components/Basic/Section';

const TrxWrapper = styled.div`
  margin-bottom: 50px;
`;

function Trx() {
  const formula = `  const oneEthInWei = '1000000000000000000';
  const cEthAddress = '0x4ddc2d193948926d02f9b1fe9e1daa0718270ed5';
  const provider = window.ethereum;
  
  (async function() {
    console.log('Supplying BNB to the Venus Protocol...');
  
    // Mint some vBNB by supplying BNB to the Venus Protocol
    const trx = await Venus.eth.trx(
      cEthAddress,
      'function mint() payable',
      [],
      {
        provider,
        value: oneEthInWei
      }
    );
  
    // const result = await trx.wait(1); // JSON object of trx info, once mined
  
    console.log('Ethers.js transaction object', trx);
  })().catch(console.error);`;

  return (
    <TrxWrapper id="venusJS-trx">
      <Label title marginBottom>
        Trx
      </Label>
      <Description>
        This is a generic method for invoking JSON RPC's eth_sendTransaction
        with Ethers.js. Use this method to create a transaction that invokes a
        smart contract method. Returns an Ethers.js TransactionResponse object.
      </Description>
      <ParameterSection>
        <Parameter name="address">
          {` (string) The BSC address the transaction is directed to.`}
        </Parameter>
        <Parameter name="method">
          {` (string) The smart contract member in which to invoke.`}
        </Parameter>
        <Parameter name="[parameters]">
          {` (any[]) Parameters of the method to invoke.`}
        </Parameter>
        <Parameter name="[options]">
          {` (CallOptions) Options to set for eth_sendTransaction, (as JSON object), and Ethers.js method overrides. The ABI can be a string optional ABI of the single intended method, an array of many methods, or a JSON object of the ABI generated by a Solidity compiler.`}
        </Parameter>
        <Parameter name="RETURN">
          {` (Promise<any>) Returns an Ethers.js TransactionResponse object or an error object if the transaction failed.`}
        </Parameter>
      </ParameterSection>
      <HighLighter>{formula}</HighLighter>
    </TrxWrapper>
  );
}

export default Trx;
